<div class="w-full p-2 flex justify-center">
	<img src="/assets/logo.svg" class="w-12 h-12">
</div>

<div class="w-full border-b border-solid border-divider-regular"></div>

<mat-vertical-stepper class="w-[600px] max-w-full my-4 shadow-lg rounded-lg" [linear]="true" #stepper>
  <!-- <mat-step [stepControl]="preferredLanguageFormGroup" [editable]="!tenantCompleted() && !loading()">
    <form [formGroup]="preferredLanguageFormGroup">
      <ng-template matStepLabel>
        {{ 'PAC.Onboarding.WhatsPreferredLanguage' | translate: {Default: 'What\'s your preferred Language'} }}
      </ng-template>

      <p class="description">{{ 'PAC.Onboarding.PreferredLanguageDescription' | translate: {Default: 'This language will be used throughout Metad analytics platform and will be the default for new users.'} }}</p>

      <mat-selection-list [multiple]="false" formControlName="preferredLanguage">
        <mat-list-option *ngFor="let language of Languages" [value]="language">
          {{ 'PAC.Languages.' + language | translate: {Default: language } }}
        </mat-list-option>
      </mat-selection-list>

      <div>
        <button mat-flat-button color="primary" matStepperNext>
          {{ 'PAC.Onboarding.Next' | translate: {Default: 'Next'} }}
        </button>
      </div>
    </form>
  </mat-step> -->

  <mat-step [stepControl]="userFormGroup" [editable]="!tenantCompleted() && !loading()">
    <form [formGroup]="userFormGroup" class="flex flex-col gap-4">
      <ng-template matStepLabel> {{ 'PAC.Onboarding.WhatCallYou' | translate: {Default: 'What should we call you'} }}?</ng-template>

      <div class="relative grid grid-cols-2 gap-2">
        <mat-form-field>
          <mat-label>{{ 'PAC.Onboarding.FirstName' | translate: {Default: 'First name'} }}</mat-label>
          <input matInput formControlName="firstName" />
        </mat-form-field>

        <mat-form-field>
          <mat-label>{{ 'PAC.Onboarding.LastName' | translate: {Default: 'Last name'} }}</mat-label>
          <input matInput formControlName="lastName" />
        </mat-form-field>

        <mat-form-field class="col-span-2">
          <mat-label>{{ 'PAC.Onboarding.Email' | translate: {Default: 'Email'} }}</mat-label>
          <input matInput placeholder="email" formControlName="email" autocomplete="email" />
        </mat-form-field>

        <mat-form-field class="col-span-2">
          <mat-label>{{ 'PAC.Onboarding.CompanyTeamName' | translate: {Default: 'Company or team name'} }}</mat-label>
          <input matInput formControlName="organizationName" />
        </mat-form-field>

        <mat-form-field class="col-span-2">
          <mat-label>{{ 'PAC.Onboarding.CreateAPassword' | translate: {Default: 'Create a password'} }}</mat-label>
          <input matInput type="password" placeholder="*******" formControlName="password" autocomplete="password" />
          <mat-error *ngIf="minlengthError() as error">
            {{ 'PAC.Onboarding.Minlength' | translate: {Default: 'Min length'} }} {{error.requiredLength}} {{ 'PAC.Onboarding.Actuallength' | translate: {Default: 'actual length'} }} {{error.actualLength}}</mat-error>
        </mat-form-field>

        <mat-form-field class="col-span-2">
          <mat-label>{{ 'PAC.Onboarding.ConfirmYourPassword' | translate: {Default: 'Confirm your password'} }}</mat-label>
          <input matInput type="password" placeholder="*******" formControlName="confirmPassword" autocomplete="password" />
          <mat-error *ngIf="mustMatchError()">{{ 'PAC.Onboarding.PasswordMustMatch' | translate: {Default: 'Password must match'} }}</mat-error>
        </mat-form-field>

        @if (loading()) {
          <ngm-spin class="absolute w-full h-full inset-0 flex justify-center items-center" />
        }
      </div>

      <div class="flex items-center gap-4">
        <button mat-flat-button color="primary" [disabled]="userFormGroup.invalid || loading()"
          (click)="onboard()"
        >{{ 'PAC.Onboarding.Next' | translate: {Default: 'Next'} }}</button>
      </div>
    </form>
  </mat-step>

  <mat-step [stepControl]="demoFormGroup" [editable]="!demoCompleted() && !loading()">
    <ng-template matStepLabel>{{ 'PAC.Onboarding.WantGenerateDemo' | translate: {Default: 'Do you want to generate samples'} }}?</ng-template>

    <div class="description my-8">{{ 'PAC.Onboarding.GenerateDemoDescription' | translate: {Default: 'The system will download the demo data file from the server link, import the data into the system database, and create the corresponding samples'} }}.</div>

    <form [formGroup]="demoFormGroup" class="flex flex-col">
      <label>{{ 'PAC.Onboarding.SelectNetwork' | translate: {Default: 'Select Network'} }}</label>
      <mat-radio-group formControlName="source" [disabled]="loading()">
        <mat-radio-button [value]="OrganizationDemoNetworkEnum.github">GitHub</mat-radio-button>
        <mat-radio-button [value]="OrganizationDemoNetworkEnum.aliyun">Aliyun oss</mat-radio-button>
      </mat-radio-group>
    </form>

    <div class="flex justify-center items-center w-full h-24">
      <mat-progress-bar *ngIf="loading()" class="w-full" mode="query"></mat-progress-bar>
      <mat-error *ngIf="demoError()" class="max-h-full max-w-full overflow-auto">{{demoError()}}</mat-error>
    </div>

    <div class="flex items-center gap-4">
      <button mat-flat-button matStepperNext>{{ 'PAC.Onboarding.Skip' | translate: {Default: 'Skip'} }}</button>
      <button mat-flat-button color="primary" [disabled]="demoFormGroup.invalid || loading()"
        (click)="generateDemo()"
      >
        <span *ngIf="!demoError()">{{ 'PAC.Onboarding.Generate' | translate: {Default: 'Generate'} }}</span>
        <span *ngIf="demoError()">{{ 'PAC.Onboarding.Retry' | translate: {Default: 'Retry'} }}</span>
      </button>
    </div>
  </mat-step>

  <mat-step [editable]="!loading() && !connectionCompleted()">
    <ng-template matStepLabel>{{ 'PAC.Onboarding.AddYourData' | translate: {Default: 'Add your data'} }}</ng-template>

    <div class="w-full flex flex-col gap-4">
      <div class="description">
        <p>{{ 'PAC.Onboarding.ReadyExploringYourData' | translate: {Default: 'Are you ready to start exploring your data? Add it below.'} }}</p>
        <p>{{ 'PAC.Onboarding.NotReadySample' | translate: {Default: 'Not ready? Skip and play around with our Samples.'} }}</p>
      </div>

      <ngm-search class="w-full" [formControl]="searchControl"></ngm-search>
      <form [formGroup]="dataSourceTypeFormGroup" class="w-full flex flex-col gap-4">
        <div class="max-h-80 w-full overflow-auto">
          <mat-selection-list formControlName="type" disableRipple [multiple]="false" [compareWith]="compareTypeFn" >
            <mat-list-option *ngFor="let item of filteredDataSourceTypes()" [value]="item" class="rounded-lg mb-1">
                <span>
                    <img src="assets/images/db-logos/{{item.type}}.png" width="32" height="32" class="m-0 inline-block">
                    {{item.name}}
                </span>
            </mat-list-option>
          </mat-selection-list>
        </div>

        <ng-container *ngIf="type">
          <div class="flex justify-center items-center">
            <img src="assets/images/db-logos/{{type.type}}.png" width="64" height="64" class="m-0 inline-block">
            <div class="text-lg">{{type.name}}</div>
          </div>
          <mat-form-field appearance="fill">
              <mat-label>
                  {{ 'PAC.Onboarding.DisplayName' | translate: {Default: 'Display Name'} }}
              </mat-label>
              <input matInput formControlName="name">
              <mat-error *ngIf="dataSourceNameError()">
                  {{ 'PAC.Onboarding.NameRequired' | translate: {Default: 'Name Required'} }}
              </mat-error>
          </mat-form-field>

          <formly-form
            [form]="dataSourceTypeFormGroup"
            [fields]="formlyFields()"
            [model]="model"
            (modelChange)="onModelChange($event)"
            >
        </formly-form>
        </ng-container>
      </form>

      <div *ngIf="type" class="flex justify-end items-center gap-4">
        <button mat-flat-button matStepperNext>{{ 'PAC.Onboarding.Skip' | translate: {Default: 'Skip'} }}</button>
        <button mat-flat-button color="primary" [disabled]="dataSourceTypeFormGroup.invalid || loading()"
          (click)="connectDatabase()"
        >{{ 'PAC.Onboarding.ConnectDatabase' | translate: {Default: 'Connect database'} }}</button>
      </div>

      <div *ngIf="!type">
        <a class="cursor-pointer" (click)="stepper.next()">
          {{ 'PAC.Onboarding.AddDataLater' | translate: {Default: 'I\'ll add my data later'} }}
          </a>
      </div>
    </div>
  </mat-step>

  <mat-step [editable]="!loading()">
    <ng-template matStepLabel>{{ 'PAC.Onboarding.Done' | translate: {Default: 'Done'} }}</ng-template>
    <div class="flex flex-col justify-start items-center gap-4">
      <div class="text-3xl text-bluegray-500 p-8">{{ 'PAC.Onboarding.AllSetup' | translate: {Default: 'You\'re all set up!'} }} </div>

      <div class="w-full border-b border-solid border-divider-regular"></div>

      <div class="p-8">
        <button type="button" class="flex justify-center items-center rounded-lg text-lg font-semibold px-4 py-1.5 shadow-sm border text-white border-gray-200 bg-primary-500 hover:bg-primary-600 hover:shadow-lg"
          (click)="navigateHome()">
          {{ 'PAC.Onboarding.TakeMetoXpertAiPlatform' | translate: {Default: 'Take me to Xpert AI Platform'} }}
        </button>
      </div>
    </div>
  </mat-step>
</mat-vertical-stepper>

<div class="p-4 my-8">
  {{ 'PAC.Onboarding.FeelStuck' | translate: {Default: 'If you feel stuck'} }}
  , <a href="https://www.mtda.cloud/docs/deploy/" class="text-bluegray-500 italic">
      {{ 'PAC.Onboarding.OurGuide' | translate: {Default: 'our getting started guide'} }}
      </a> {{ 'PAC.Onboarding.ClickAway' | translate: {Default: 'is just a click away'} }}.
</div>